<template>
  <div class="FromGood">
    <el-form
      :model="goodFrom"
      :rules="ruleGood"
      ref="goodFrom"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.userName"
            placeholder="请输入用户名称"
            size="medium"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别" prop="name">
        <el-col :span="5">
          <el-select
            style="width: 100%"
            v-model="goodFrom.gander"
            placeholder="请选择性别"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="头像路径" prop="goodsImage">
        <el-upload
          :action="uploadbaseurl + '/upload'"
          list-type="picture-card"
          multiple
          :limit="1"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
          :file-list="fileList"
          :on-exceed="message"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="goodFrom.avatarUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item v-show="false" label="头像路径" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.avatarUrl"
            placeholder="请输入头像链接"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="用户账号" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.account"
            placeholder="请输入账号"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="别称" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.nikeName"
            placeholder="请输入别称"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="邮箱" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="电话" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.mobile"
            placeholder="请输入电话"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="状态" prop="name">
        <el-col :span="5">
          <el-select
            style="width: 100%"
            v-model="goodFrom.status"
            placeholder="请选择状态"
          >
            <el-option label="禁用" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="用户等级 " prop="name">
        <el-col :span="5">
          <el-select
            style="width: 100%"
            v-model="goodFrom.level"
            placeholder="请选择等级"
          >
            <el-option label="超级管理员" value="0"></el-option>
            <el-option label="管理员" value="1"></el-option>
            <el-option label="商家" value="2"></el-option>
            <el-option label="商家员工" value="3"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="用户密码" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="选择门店" prop="storeId">
        <el-col :span="5">
          <el-select
            style="width: 100%"
            v-model="goodFrom.storeId"
            placeholder="请选择门店"
          >
            <el-option
              v-for="item in store"
              :key="item.id"
              :label="item.storeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <!-- <el-form-item label="产品分类" prop="region">
        <el-select v-model="goodFrom.region" placeholder="请选择产品分类">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="轮播图" prop="region">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="宣传图" prop="region">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="submitForm('goodFrom')"
          >立即修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      uploadbaseurl: null,
      loading: false,
      goodFrom: {
        userName: "asch_" + new Date().getUTCDate(),
        gander: "男",
        avatarUrl: "",
        account: "asch_" + new Date().getDate(),
        nikeName: "",
        email: "",
        mobile: "",
        status: "0",
        level: "0",
        password: "",
      },
      ruleGood: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        gander: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        avatarUrl: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        nikeName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        status: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        level: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
      },
      store: [],
      dialogVisible: false,
      fileList: [],
    };
  },
  async created() {
    console.log(this.id);
    this.getStores();
    this.uploadbaseurl = this.baseurl;

    let res = await this.http.get("/user/getById?id=" + this.id);
    if (!res.error) {
      this.goodFrom = !res.error ? res.result : {};
      this.goodFrom.status = this.goodFrom.status.toString();
      this.goodFrom.level = this.goodFrom.level.toString();
      if (res.result.avatarUrl) {
        this.fileList.push({
          url: res.result.avatarUrl,
        });
        console.log(this.fileList);
      }
    } else
      this.eui.Message({
        message: `获取id为：'${this.id}'的用户信息失败`,
        type: "error",
      });
    console.log(this.goodFrom);
  },
  methods: {
    async getStores() {
      let res = await this.http.get("/store/getList");
      this.store = res.error ? [] : res.result;
      console.log(this.store);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.updateuser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async updateuser() {
      console.log(this.goodFrom);
      let msg;
      if (this.goodFrom.mobile === "" || this.goodFrom.password === "") {
        if (this.goodFrom.mobile === "") {
          msg = "电话不能为空";
        } else if (this.goodFrom.password === "") {
          msg = "密码不能为空";
        }
        this.eui.Message({
          message: msg,
          type: "error",
          duration: 5 * 1000,
        });
        this.loading = false;
        return false;
      } else {
        let type = "success",
          rmsg;
        let res = await this.http.post("/user/update", this.goodFrom);
        if (!res.error) {
          (type = "success"), (rmsg = "修改成功");
        } else {
          (type = "error"), (rmsg = "修改失败");
        }
        this.eui.Message({
          message: rmsg,
          type: type,
          duration: 5 * 1000,
        });
        this.loading = false;
      }
    },
    handleRemove(file, fileList) {
      this.goodFrom.avatarUrl = "";
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    uploadSuccess(response, file, fileList) {
      this.goodFrom.avatarUrl = response.result[0];
    },
    dealFileList(fileList) {},
    message(msg, type) {
      this.eui.Message({
        message: "超出上传个数",
        type: "error",
      });
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>